<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.mui-content {
				height: auto;
			}
			
			.mui-table-view-cell.mui-checkbox input[type=checkbox] {
				top: 40px;
				left: 2px;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before {
				color: #e83426;
			}
			.cart-list img{ width: 5rem;}
			.mui-pull-left {
				margin-right: 0;
				margin-left: 25px;
				margin-right: 10px;
				border: 1px solid #eee;
			}
			
			.product-list.mui-table-view .mui-media-body.price {
				margin: 6px 0;
			}
			
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				background-color: #fff;
			}
			
			.product-list .mui-table-view-cell {
				margin-bottom: -1px;
			}
			
			.mui-numbox {
				border-radius: 0;
				width: 100px;
				padding: 0 30px;
			}
			
			.mui-numbox [class*=mui-numbox-btn] {
				width: 30px;
			}
			
			.mui-numbox .mui-numbox-input {
				color: #303030;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-rbox {
				border-bottom: none;
			}
			
			.mui-rbox .price {
				margin-top: 0;
			}
			
			.del {
				color: #9a9a9a;
				font-size: 12px;
				border: 1px solid #dbdbdb;
				padding: 5px;
				float: right;
				border-radius: 8px;
			}
			
			.hot-product-list .mui-table-view-cell {
				margin-bottom: 1px;
			}
			
			.mui-bar-tab {
				background-color: transparent;
				border-bottom: 0 none;
			}
			
			.mui-btn-danger,
			.mui-btn-danger,
			input[type=submit] {
				background: #e15616;
				border-color: #e15616;
			}
			
			.mui-btn {
				padding: 5px 10px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav"></a>
			<h1 class="mui-title">购物车</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<div class="zj">
				<label class="mui-checkbox all-checkbox">
				<input id="ckb" style="top: 10px; margin-right: 5px; left:0; float: left; position: inherit;" class="all_check" name="checkbox1" value="" type="checkbox" >全选</label>
				<div class="zjq">
					总价：
					<font id="countMoney">￥0.00</font>
					<br />
					<span>(不含运费和税费)</span>
				</div>
			</div>
			<div class="zj-btn" id="furnish">立即支付</div>
		</nav>
		<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
			<div class="mui-scroll">
				<ul class="mui-table-view product-list hot-product-list">
					<div class="product-no" style="display: none;">
						<img src="img/gwc.png" />
						<p>购物车里什么都没有，赶快去购物吧</p>
						<button id="go" class="mui-btn mui-btn-block mui-btn-danger" data-url="/index.html" data-id="index.html">去购物</button>
					</div>
					<div id="cartData"></div>
					<!-- <li class="mui-table-view-cell mui-media cart-list">
				<a href="javascript:void(0);">
					<div class="mui-checkbox" style="left:50px;top:30px;position: absolute;">
						<input id="ckb" class="single_check" name="checkbox1" value="" type="checkbox" ></div>
					<img class="mui-pull-left" src="http://cdn.bestkeep.cn/goods/img/goods_1446281323524.jpg@60p_80q">
					<div class="mui-rbox">
						<p class="line-num1">INZA 应赞全脂牛奶 1L*4盒/组限时抢购19元 （10月30日到期）</p>
						<div class="price">
							<span class="money">35.00</span>
							<span class="old-money">70.00</span>
						</div>
						<div class="mui-numbox">
							<button class="mui-btn mui-numbox-btn-minus" data-kucun="5" data-id="856506" type="button">-</button>
							<input class="mui-numbox-input" readonly="readonly" type="number" id="munber_856506" value="1" />
							<button class="mui-btn mui-numbox-btn-plus" data-kucun="5" data-id="856506" type="button">+</button>
						</div>
						<span class="del" data-id="#id#">删除</span>
					</div>

				</a>

			</li>
			-->
				</ul>
			</div>
		</div>
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script>
			var tokenVal = $.fn.cookie('token');
			ifLogin(tokenVal);

			var countMoney = 0;
			var typeData = [];
			(function(mui, doc) {
				mui.init({
					statusBarBackground: '#ffffff',
					pullRefresh: {
						container: "#pullrefresh",
						down: {
							contentdown: "下拉刷新",
							contentover: "释放立即刷新",
							contentrefresh: "正在刷新...",
							callback: function() {
								getCartData();
								$('#ckb').prop('checked', false);
								$('#countMoney').html('￥0.00');
							}
						}
					}
				});

				function ifCartList() {
					if($('.cart-list').length <= 0) {
						$('.mui-bar-tab').hide();
						$('.product-no').show();
					} else {
						$('.mui-bar-tab').show();
						$('.product-no').hide();
					}
				}

				var getCartData = function() {
					loadingShow();
					$.ajax({
						url: __BATE__ + 'api/cartList',
						data: {
							token: tokenVal
						},
						async: true,
						type: 'post',
						success: function(json) {
							var goods_list = json.data;
							console.log(goods_list)
								// $('#countMoney').innerHTML = data.total.goods_price;
								// $('#countItem').innerHTML = data.total.total_number;
							var htmls = '';
							for(var i = 0; i < goods_list.length; i++) {
								htmls += '<li class="mui-table-view-cell mui-media  cart-list" data-cartId="' + goods_list[i].cart_id + '">' +
									'<a href="javascript:void(0);">' +
									'<div class="mui-checkbox" style="left:50px;top:30px;position: absolute;"><input id="ckb" class="single_check" name="checkbox1" value="" type="checkbox" data-cartId="' + goods_list[i].cart_id + '"></div>' +
									'<img class="mui-pull-left" src="' + goods_list[i].img + '">' +
									'<div class="mui-rbox">' +
									'<p class="line-num1">' + goods_list[i].name + '</p>' +
									'<div class="price">' +
									'<span class="money">' + goods_list[i].price + '</span>' +
									'</div>' +
									'<div class="mui-numbox">' +
									'<button class="mui-btn mui-numbox-btn-minus" data-kucun="' + goods_list[i].inventory + '"  data-cartId="' + goods_list[i].cart_id + '" data-productId="' + goods_list[i].product_id + '" type="button">-</button>' +
									'<input class="mui-numbox-input" readonly="readonly" type="number"  value="' + goods_list[i].qty + '" />' +
									'<button class="mui-btn mui-numbox-btn-plus" data-kucun="' + goods_list[i].inventory + '" data-cartId="' + goods_list[i].cart_id + '" data-productId="' + goods_list[i].product_id + '" type="button">+</button>' +
									'</div>' +
									'<span class="del" data-cartId="' + goods_list[i].cart_id + '">删除</span>' +
									'</div>' +
									'</a>' +
									'</li>'
							}
							$("#cartData").html(htmls);
							mui('.mui-numbox').numbox();
							ifCartList()

							try {
								mui('#pullrefresh').pullRefresh().endPulldownToRefresh(true);
							} catch(e) {}

						},
						error: function() {

							serverErr();

						}
					});
				};

				var computeSumAllCartMoney = function() {
					var money = 0;
					mui(".mui-table-view .mui-table-view-cell").each(function() {
						var that = this;
						if($(that).find('input[type="checkbox"]').is(':checked')) {
							money = money + parseFloat($(this).find('.money').html() * $(this).find('.mui-numbox-input').val());
						}
					});
					money = money.toFixed(2);
					$('#countMoney').html('￥' + money);
				};

				mui.ready(function() {

					getCartData();

					//减
					mui('body').on('tap', '.mui-numbox-btn-minus', function() {
						var that = $(this);

						var id = $(this).attr('data-cartId');
						var kucun = _int($(this).attr('data-kucun'));
						var munberObj = $(this).next('.mui-numbox-input');

						munberObj.val(_int(munberObj.val()));

						if(munberObj.val() <= 0) {
							munberObj.val(1);
							return false;
						}

						computeSumAllCartMoney();

						$.ajax({
							url: __BATE__ + 'api/minusCart',
							data: {
								cart_id: id,
								qty: 1
							},
							type: 'post',
							success: function(json) {
								if(json.ret_msg == true) {}
							}
						});

					});

					//加
					mui('body').on('tap', '.mui-numbox-btn-plus', function() {
						var that = this;

						var productId = $(this).attr('data-productId');
						var kucun = _int($(this).attr('data-kucun'));
						var munberObj = $(this).prev('.mui-numbox-input');

						munberObj.val(_int(munberObj.val()));

						if(munberObj.val() > kucun) {
							munberObj.val(kucun);
						}

						computeSumAllCartMoney();

						$.ajax({
							url: __BATE__ + 'api/addToCart',
							data: {
								id: productId,
								qty: 1,
								token: tokenVal
							},

							type: 'post',
							success: function(json) {
								if(json.ret_msg == true) {} else if(json.ret_msg == "用户未登录") {
									stip(json.ret_msg);
									setTimeout(function() {
										toLoginView();
									}, 1000)
								} else if(json.ret_msg == "token验证无效或已过期") {
									stip(json.ret_msg);
									setTimeout(function() {
										toLoginView();
									}, 1000)
								} else {
									mui.alert('非常抱歉，购买数量超过库存了！', '', function() {});
								}
							},
							error: function() {
								serverErr();
							}
						});

						return false;
					});

					/*多选*/
					$('.all_check').click(function() {
							if($(this).is(':checked')) {
								$('.single_check').prop('checked', true);
								computeSumAllCartMoney();
							} else {
								$('.single_check').prop('checked', false);
								computeSumAllCartMoney();
							}
						})
						//单选
					mui('body').on('tap', '.single_check', function() {

						var that = this;
						var val = $(that).attr('data-labelname');
						if(that.checked) {
							that.checked = false;
						} else {
							that.checked = true;
						}
						computeSumAllCartMoney();

						var length = $('.single_check').length,
							checkedLength = $('.single_check:checked').length;

						if(length === checkedLength) {
							$('.all_check').prop('checked', true);
						} else {
							$('.all_check').prop('checked', false);
						}
						return false;
					});
					/*删除商品*/
					mui('body').on('tap', '.del', function(e) {
						var id = $(this).attr('data-cartId');
						var asd = $(this).parents('.mui-media');
						e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
						var btnArray = ['否', '是'];
						mui.confirm('确认要删除此商品吗？', '', btnArray, function(e) {
							if(e.index == 1) {
								$.ajax({
									url: __BATE__ + 'api/removeCart',
									data: {
										cart_id: id
									},
									type: 'post',
									success: function(json) {
										if(json.ret_msg) {
											asd.remove();
											ifCartList()
											computeSumAllCartMoney();
										} else {
											stip(json.ret_msg)
										}
									},
									error: function() {
										serverErr();
									}
								});

							}
						})
					});

					mui('body').on('tap', '#furnish', function() {
						var checkedLength = $('.single_check:checked').length;
						if(checkedLength < 1) {
							stip('请勾选购物车！');
							return false;
						}

						var ids = '';
						var carts = new Array();
						$('.single_check:checked').each(function() {
							var that = this;
							carts.push($(that).attr('data-cartId')) ;
						});
						var b = carts.join(",")
						$.ajax({
							url: __BATE__+'api/confirmGoods',
							data: {
								token:tokenVal,
								addr_id: 0,
								cart_ids:b
							},
							type: 'post',
							success: function(data) {
									openView('/order.html?cartId='+b, 'order.html');
							},
							error: function() {
								serverErr();
							}
						});
					});

					mui('body').on('tap', '#go', function() {
						mui.openWindow({
							url: '/index.html',
							id: 'index.html'
						});
					})
				});
			}(mui, document));
		</script>
	</body>

</html>